<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" width="300px">
    <el-button type="primary" :disabled="formLoading" @click="submitForm">确 定</el-button>
    <el-button @click="dialogVisible = false">取 消</el-button>
    <Table
      :data="folderList"
      :columns="folderColumns"
      row-key="id"
      alignWhole="left"
      :show-header="false"
      style="--el-table-border-color: none; border: 1px solid #dcdfe6; margin-top: 10px"
      align="left"
      v-loading="formLoading"
      @row-click="handleMailFolderClick"
      @row-dblclick="handleMailFolderDblclick"
      :default-expand-all="true"
      max-height="500"
    >
      <template #name="{ row }">
        <Icon :icon="row.icon" class="inline-block h-[13px] mr-1" />
        <span>{{ row.name }}</span>
      </template>
    </Table>
  </Dialog>
</template>
<script setup name="MailMoveFolder" lang="ts">
import * as MailUtil from '@/views/mailbox/mail/MailUtil'
import * as MailApi from '@/api/mailbox/mail'
import { handleTree } from '@/utils/tree'
import { MailboxFolderTypeEnum } from '@/utils/constants'
import { getKeyList } from '@pureadmin/utils'
import { without } from 'lodash-es'
const { t } = useI18n() // 国际化
const dialogTitle = ref('选择文件夹')
const dialogVisible = ref(false)
const formLoading = ref(false)
const currentRow = ref()
const message = useMessage() // 消息弹窗
const folderColumns: TableColumnList = [
  {
    label: '文件夹名称',
    prop: 'name',
    slot: 'name'
  }
]
const folderList = ref()
let params: any = {}
/** 打开弹窗 */
const open = async (param) => {
  dialogVisible.value = true
  params = param
  // 修改时，设置数据
  if (params.accountId) {
    formLoading.value = true
    try {
      let accountFolder = await MailApi.getFolderByAccountIds([params.accountId])

      accountFolder = accountFolder.filter((item) => {
        // 过滤掉标签
        if ([MailboxFolderTypeEnum.LABEL].includes(item.folderType)) {
          return false
        }

        // 给文件夹增加图标
        if (
          MailUtil.folderStyle[item.name] != undefined &&
          [MailboxFolderTypeEnum.INTERNAL, MailboxFolderTypeEnum.LABEL].includes(item.folderType)
        ) {
          Object.assign(item, MailUtil.folderStyle[item.name])
          item.name = t('mailbox.folder.' + item.name)
        } else {
          Object.assign(item, MailUtil.folderStyle['other'])
        }
        return true
      })
      folderList.value = handleTree(accountFolder)
      folderList.value[0].children = folderList.value[0].children.filter((item) => {
        // 过滤掉草稿箱
        if (
          [MailboxFolderTypeEnum.INTERNAL].includes(item.folderType) &&
          item.name == t('mailbox.folder.draft')
        ) {
          return false
        }
        return true
      })
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

const handleMailFolderClick = (row) => {
  currentRow.value = row
}

const handleMailFolderDblclick = (row) => {
  currentRow.value = row
  submitForm()
}

const emit = defineEmits(['success'])
const submitForm = async () => {
  if (currentRow.value == undefined) {
    message.error('请选择文件夹')
    return false
  }
  if (currentRow.value.folderType == MailboxFolderTypeEnum.ACCOUNT) {
    message.error('不能选择账号文件夹')
    return false
  }
  const errorInfos = await MailApi.moveFolder({
    mailIds: params.mailIds,
    targetFolderId: currentRow.value.id
  })
  const errorMailIds = getKeyList(errorInfos, 'mailId')
  const successMailIds = without(params.mailIds, ...errorMailIds)
  dialogVisible.value = false
  // 发送操作成功的事件
  emit('success', successMailIds)
}
</script>
